<template>
  <div>
      <h5>
        <!--<img :src="title.imgUrl">-->
        {{title.desc}}
      </h5>
      <ul class="like-list">
          <router-link
            v-for="item of likeLists"
            :key="item.id"
            class="border-bottom"
            tag="li"
            :to="'/detail/'+item.id"
          >
            <img class="like-img" :src="item.imgUrl" alt="">
            <div class="like-info">
                  <h6 class="like-item-title">
                      {{item.title}}
                  </h6>
                  <div class="like-item-desc">
                        {{item.desc}}
                  </div>
                  <button>查看详情</button>
            </div>
          </router-link>
      </ul>
  </div>
</template>

<script>
    export default {
        props:['recommendRes'],
        name: "HomeRecommend",
        data(){
          return{
            title: {
              desc: "猜你喜欢",
              imgUrl: "http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png"
            },
            likeLists: []
          }
        },
      watch:{
          recommendRes (newval,oldval){
              this.likeLists = newval;

          }
      }
    }
</script>

<style lang="stylus" scoped>
  @import "~assets/styles/mixins.styl"
  h5
    line-height:0.8rem
    text-indent:0.2rem
    font-size 0.32rem
    background #f5f5f5
  h5 img
    width: 0.3rem
    height 0.3rem
    display inline-block
    overflow hidden
    margin-right: 0.05rem

  .like-list li
    display flex
    //定义flex方向，row-resverse,column,column-resverse
    flex-direction row
    // 自动换行 wrap 第一个掉下去在最左侧
    // nowrap  不换行 默认
    // wrap-resverse  第一个掉下去的在右侧
    flex-warp:wrap
    //上述两个属性合并起来可以用下方的语法
    flex-flow:row wrap
    // 整体分布方式，flex-start左对齐，flex-end右对齐，center居中
    //间隔对齐方式，space-between 居中对齐 space-around 两端对齐
    justify-content: flex-start
    // 竖直对齐方式 flex-start顶部对齐 flex-end 底部对齐  center中间对齐  baseline文字第一行对齐 stretch 每个项目都撑满整个高度，高度为height:auto时
    align-items: flex-start
    overflow hidden
    padding 0.2rem
  .like-list .like-img
    width:2rem
    height:2rem
    margin-right 0.2rem
  .like-list .like-img img
    width: 100%
  .like-list .like-info
    //元素自动撑开
    flex 1
  .like-list .like-info .like-item-title
    font-size 0.32rem
  .like-list .like-info .like-item-title
    line-height:0.6rem
  .like-list .like-info .like-item-desc
    line-height 0.32rem
    height 0.64rem
    color: #ccc
    col-ellipsis()
  .like-list .like-info button
    line-height:0.44rem
    background #ff9300
    border-radius 0.08rem
    padding 0.06rem 0.2rem
    font-size:0.24rem
    color:#fff
    margin-top:0.16rem
    font-family: "微软雅黑"
  .border-bottom::before, .border-topbottom::after, .border-rightbottom::after, .border-bottomleft::before
    border-bottom: 1px solid #e0e0e0;
</style>
